<!--
 * @description: 主题按钮
 * @Author: Islands
 * @Date: 2024-06-19 17:02:56
 * @LastEditTime: 2024-06-21 21:55:41
-->
<script lang="ts" setup>
import { Refresh, CopyDocument } from '@element-plus/icons-vue';
import Template from './modules/template/index.vue';
import TemplateImage from './modules/template-image.vue';
import Color from './modules/color.vue';
import Animation from './modules/animation.vue';
import Use from './modules/use.vue';

import { IconTooltip } from '@/components/SvgIcon';
import { useSwitch } from '@/hooks/index';
const { flag, open, close } = useSwitch();
const handleClose = () => {
    close();
};
</script>
<template>
    <IconTooltip :onClick="open" :tooltipTitle="$t(`tooltip.theme`)" icon="zhuti" />

    <!-- 抽屉 -->
    <el-drawer v-model="flag" size="400" append-to-body :title="$t(`tooltip.theme`)" :before-close="handleClose">
        <div class="m">
            <Template />
            <TemplateImage />
            <Color />
            <Animation />
            <Use />
        </div>
        <template #footer>
            <div class="between-space-justify">
                <el-button :icon="CopyDocument" type="info">{{ $t(`button.copyConfig`) }}</el-button>
                <el-button :icon="Refresh" type="primary">{{ $t(`button.resetConfig`) }}</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<style lang="scss" scoped>
.m {
    padding-bottom: 26px;
}
</style>
